﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tipos de planos</title>
<script type="text/javascript">
function visualizaBasico(){
				document.getElementById("visualizaLuxo").hidden = true;
				document.getElementById("visualizaConvencional").hidden = true;
				document.getElementById("visualizaBasico").hidden = false;
			}
    		function visualizaConvencional(){
				document.getElementById("visualizaBasico").hidden = true;
				document.getElementById("visualizaLuxo").hidden = true;
				document.getElementById("visualizaConvencional").hidden = false;
			}
			function visualizaLuxo(){
				document.getElementById("visualizaConvencional").hidden = true;
				document.getElementById("visualizaBasico").hidden = true;
				document.getElementById("visualizaLuxo").hidden = false;
			}
			
</script>
<style type="text/css">
.jump{
padding:18px;
	}
.teste{
	width:300px;
	height:40px;
	border-radius:5px;
	background:url(Sem%20t%C3%ADtulo.png);
	}
.but{
	width:110px; background:#069; color:#FFF;padding:7px; cursor:pointer; border-radius:15px;
	margin-top:30px; 
	}
.but:hover{
	background:#F00;}
.bas{
	background:url(Sem%20t%C3%ADtulo.png);
	border-radius:10px;
	width:800px;}
</style>
<script type="text/javascript">
	function chamar(){
		alert("sei la..");
		}
</script>
</head>
<body background="12.jpg">
        <center><legend><h2><b>Defina seu plano<b></h2></legend><center>
        <div class="jump">
           <span>Tipo de plano:</span><br>
           		 <select name="plano"  class="teste" id="plano"  onChange="MM_jumpMenu('parent',this,0)">
 					<option></option>       
            		<option onClick="visualizaBasico()" > Basico </option></a>
                	<option onClick="visualizaConvencional()" > Convéncional </option>
                	<option onClick="visualizaLuxo()" > Luxo </option>
            	</select><br>
		</div> 
	<form method="post" action="banco_dep.php" onSubmit="chamar()">
  		 <div id="visualizaBasico" class="bas" value="teste" hidden="true">
			<center>
				<legend><h3>Preencha os dados dos dependentes</h3></legend>
            	<?php for($i = 0; $i < 8; $i++){?>
					<input type="text" size="50" placeholder="Nome" name="nome<?php echo($i)?>" id="nome0" required>
 		        <input name="sobrenome<?php echo($i)?>" type="text" size="50" id="sobrenome" placeholder="Sobrenome" require><br>
 			    <?php }?>
	     	<input type="submit" class="but" name="submit" id="submit" value="Guardar" >
		</center>
	</div>
	<div id="visualizaConvencional" class="bas" value="teste" hidden="true" >
		<center>
			<legend><h3>Preencha os dados dos dependentes</h3></legend>
            <?php for($p = 0; $p < 10; $p++){?>
            <input type="text" size="50" placeholder="Nome" name="nome1" id="nome1" required>
            <input name="sobrenome" type="text" size="50" id="sobrenome" placeholder="Sobrenome" required><br>
             <?php } ?>
             <input type="submit" class="but" name="submit" id="submit" value="Guardar">
		</center>
	</div>
	<div id="visualizaLuxo" class="bas" value="teste" hidden="true">
		<center>
	<legend><h3>Preencha os dados dos dependentes</h3></legend>
   		    <?php for($o = 0; $o < 12; $o ++){?>
            <input type="text" size="50" placeholder="Nome" name="nome2" id="nome2" required>
            <input name="sobrenome" type="text" size="50" id="sobrenome" placeholder="Sobrenome" required><br>
            <?php }?>  
            <input type="submit" class="but" name="submit" id="submit" value="Guardar" >
  		</center>
		</center>
	</div>
   </form>
     
</body>
</html>